<!-- 帮助 -->
<template>
  <div class="help-page">
    <div>
      <router-link to="/">
        <Icon type="icon-jiantou">
          主页
        </Icon>
      </router-link>
    </div>
    <Tabs :list="the.tabs.list"
          :active="the.tabs.active"
          closable
          scrolled
          @onEvent="onTabsEvent">
      <div style="background: #fff;">公共内容</div>
      <template #formPage>
        <form-page-test />
      </template>
      <template #qv-tab_dot>
        表单配置参数
        <TextJson v-model="the.form.opts"
                  style="height:5rem; width:70%;" />
        表单内容
        <TextJson v-model="the.form.data"
                  style="height: 10rem; width:70%;" />
        <Button @click="btnForm">创建表单提交</Button>
      </template>
      <template #qv-tabs-3>
        <TextUbb v-model="the.ubb"
                 style="height: 10rem; width:70%;"
                 rows="5" />
      </template>
      <template #qv-tabs-4>
        <div class="help-html">
          <Textarea v-model="the.md"
                    placeholder="请输入多行文本框"
                    spellcheck="false"
                    cols="300"
                    rows="20"
                    @onEvent="onTabsEvent" />

          <TextHtml v-model="the.md" />
        </div>
      </template>
      <template #qv-tab_btn>
        <div class="button-page">
          <p class="one">
            <Button @click="btnEvent">Default</Button>
            <Button @click="btnEvent($event,'primary')"
                    type="primary">primary</Button>
            <Button @click="btnEvent"
                    type="info">Info</Button>
            <Button @click="btnEvent"
                    type="success">Success</Button>
            <Button @click="btnEvent"
                    type="warning">Warning</Button>
            <Button @click="btnEvent"
                    type="error">Error</Button>
            <Button @click="btnEvent"
                    type="mark">Mark</Button>
          </p>
          <p>
            <ButtonGroup>
              <Icon type="icon-jiantou" />
              <Select>
                <option> 选择锁定的列
                </option>
                <option value="index">序
                </option>
                <option value="name">姓名
                </option>
              </Select>
              <Input />
              <Button type="primary">primary</Button>
            </ButtonGroup>
            <ButtonGroup>
              <Button>Default</Button>
              <Button type="info">Info</Button>
              <Button type="success">Success</Button>
              <Button type="warning">Warning</Button>
              <Button type="error">Error</Button>
              <Button type="mark">Mark</Button>
            </ButtonGroup>
          </p>
          <p>
            circle:圆形
            <ButtonGroup shape="circle">
              <Button>Default</Button>
              <Button type="primary">primary</Button>
              <Button type="info">Info</Button>
              <Button type="success">Success</Button>
              <Button type="warning">Warning</Button>
              <Button type="error">Error</Button>
              <Button type="mark">Mark</Button>
            </ButtonGroup>
          </p>
          <p>
            large:大尺寸
            <ButtonGroup size="large">
              <Input />
              <Button type="primary">primary</Button>
            </ButtonGroup>
            <ButtonGroup size="large">
              <Button>Default</Button>
              <Button type="info">Info</Button>
              <Button type="success">Success</Button>
              <Button type="warning">Warning</Button>
              <Button type="error">Error</Button>
              <Button type="mark">Mark</Button>
            </ButtonGroup>
          </p>
          <p>large:大尺寸圆形
            <ButtonGroup size="large"
                         shape="circle">
              <Button>Default</Button>
              <Button type="primary">primary</Button>
              <Button type="info">Info</Button>
              <Button type="success">Success</Button>
              <Button type="warning">Warning</Button>
              <Button type="error">Error</Button>
              <Button type="mark">Mark</Button>
            </ButtonGroup>
          </p>
          <p>
            small:小尺寸
            <ButtonGroup size="small">
              <Select>
                <option> 选择锁定的列
                </option>
                <option value="index">序
                </option>
                <option value="name">姓名
                </option>
              </Select>
              <Input />
              <Button type="primary">primary</Button>
            </ButtonGroup>
            <ButtonGroup size="small">

              <Button>Default</Button>
              <Button type="info">Info</Button>
              <Button type="success">Success</Button>
              <Button type="warning">Warning</Button>
              <Button type="error">Error</Button>
              <Button type="mark">Mark</Button>
            </ButtonGroup>
          </p>
          <p>
            small:小尺寸圆形
            <ButtonGroup size="small"
                         shape="circle">
              <Button>Default</Button>
              <Button type="primary">primary</Button>
              <Button type="info">Info</Button>
              <Button type="success">Success</Button>
              <Button type="warning">Warning</Button>
              <Button type="error">Error</Button>
              <Button type="mark">Mark</Button>
            </ButtonGroup>
          </p>
          <p class="one">small:小尺寸圆形按钮
            <Button size="small"
                    shape="circle"
                    icon="icon-jiantou" />
            <Button type="primary"
                    size="small"
                    shape="circle"
                    icon="icon-shouye" />

            <Button type="info"
                    size="small"
                    shape="circle"
                    icon="icon-jiantou" />

            <Button shape="circle"
                    icon="icon-jiantou" />
            <Button type="primary"
                    shape="circle"
                    icon="icon-shouye" />

            <Button type="info"
                    shape="circle"
                    icon="icon-jiantou" />
          </p>
          <p class="one">
            多国语按钮：
            <Input size="small" />
            <Button size="small"
                    type="primary">{{getLang('primary')}}</Button>
            <Button size="small"
                    type="primary">{{getLang('primary','en')}}</Button>
            <Button type="dashed">Dashed 虚线按钮</Button>
            <Button type="text">Text 文字按钮</Button>
            映射规则: {{ getLangBind()  }}
          </p>
          <p>
            <Button loading
                    type="primary"
                    long
                    icon="icon-sousuo"> long 长按钮 loading </Button>

          </p>

        </div>
      </template>

    </Tabs>
  </div>
</template>

<script>
import { reactive, h } from '@/components/vue.api';
import FormPageTest from './form-page.vue'
export default {
  components: {
    FormPageTest
  },
  setup () {

    // 外挂Api
    // const { reactive, h } = window.$plus.vue;
    const the = reactive({
      form: {
        // 创建不自动提交
        make: true,
        // 表单配置
        opts: {
          url: 'http://127.0.0.1:800/admin/login.php',
          method: 'post',
          target: '_blank',
          style: {
            // display: 'none'
          }
        },
        // 提交的参数与内容
        data: {
          loginname: 'nasadministrator',
          password: ''
        },
        btns: {
          '提交': () => {
            // this.submit()
          }
        }
      },
      body: { d: 3 },
      ubb: '4',
      md: '<b>html 5</b>',
      tabs: {
        active: 0,
        list: [
          {
            key: 'formPage',
            title: '表单'
          },
          {
            title: '架构1',
            dot: true,
            body: '<p>内容 1 </p><b> html Body or Model</b>',
            model: {
              props: {
                value: 123
              },
              component: 'Input'
            }
          },
          {
            title: '架构2',
            body: '内容2',
            dot: '5m',
            model: {
              props: {
                title: '点此修改dot'
              },
              // 非全局自定义组件需标记markRaw
              //component: markRaw(TextPage)
              // 函数组件
              component: (props, { emit }) => {
                let _len = 12;
                const btnEvent = () => {
                  console.log('btnEvent')
                  emit('onEvent', { cmd: 'edit', data: _len++ })
                }

                //  return h('div', `${props.title}`)
                return h('div',
                  [
                    h('Button', {
                      class: ['foo', 'bar'],
                      style: { margin: '10px' },
                      // attrs: attrs,
                      onClick: btnEvent
                    }, `${props.title}`)
                  ])
              },

            },
            /** 监听组件回调 */
            onEvent: (resp) => {
              console.log('onEvent', resp);
              // 修改标识
              the.tabs.list[resp.byIndex].dot = resp.data
            }
          },
          {
            // key 自定义插槽命名
            key: 'qv-tab_dot',
            title: '表单提交',
            body: '内容3'
          },
          {
            title: '服务器4',
            body: '内容4'
          },
          {
            title: '组织列表5',
            body: '内容5'
          },
          {

            title: '按钮多国语',
            key: 'qv-tab_btn'
          },
        ],
      }
    })


    // 本地组件引入
    // const EditPage = () => import('../views/EditPage.vue');
    // the.tabs.list.push({
    //   title: '外挂组件',
    //   dot: true,
    //   // 添加组件
    //   model: {
    //     props: {
    //       title: '组件传入的参数'
    //     },
    //     component: markRaw(EditPage)
    //   }
    // });

    const onTabsEvent = (resp) => {
      console.log('onTabsEvent', resp)
      switch (resp.cmd) {
        case 'click':
          // 标签点击切换触发事件
          break;
        case 'close':
          // 标签点击关闭触发
          the.tabs.list.splice(resp.index, 1);
          break;
        case 'tabDrag':// 拖动触发排序
          console.log('tabDrag', resp.index);
          the.tabs.list = resp.change(the.tabs.list);
          the.tabs.active = resp.index;
          break;
      }
    };

    const { message, lang } = window.$plus.ui;

    /**
     * 按钮事件
     * @param {*} el dom对象
     * @param {*} cmd 自定义传入参数
     */
    const btnEvent = (el, cmd) => {
      let text = el && el.target.tagName
      // console.log(cmd, el.target.tagName);
      // if (el) {
      //   // 默认方法，form 默认提交等，不是必须
      //   el.preventDefault();
      //   console.log(el.target.value);
      // }

      message.info('点击cmd:' + cmd, { text });
    };



    /**
     * 多国语言规范
     * 组件名.方法名.语言名
     */
    let langPage = {
      zh: {
        pageHelp: {
          primary: '中文主按钮',
          today: '今日{item}条记录' //映射参数item
        }
      },
      en: {
        pageHelp: {
          primary: 'en primary button',
          today: '{item} records today' //映射参数item
        }
      }
    };

    /**
     * 自定义读取语言方法名
     * @param {*} key 定义的关键词
     * @returns {string} 翻译文本
     */
    const getLang = (key, local) => {
      // 取出UI语言包
      // return lang.by('datePanel.' + key);

      // 取出自定义语言包,指定语种
      if (local) {
        return lang.by('pageHelp.' + key, langPage, local);
      } else {
        // 取出自定义语言包，默认 config.locale
        return lang.by('pageHelp.' + key, langPage);
      }
    };

    const getLangBind = () => {
      //  return lang.by('pageHelp.today', langPage);
      return lang.bind({ item: 6 }, lang.by('pageHelp.today', langPage))
    }

    const { bindForm } = window.$plus.ui;
    const btnForm = () => {
      // 绑定表单默认提交
      let _form = bindForm(the.form)
      console.log(_form)
      if (the.form.make) {
        // 只是创建表单，不提交表单
        document.body.appendChild(_form);
      }
    }


    return { the, btnForm, getLangBind, onTabsEvent, btnEvent, getLang }
  },
}

</script>

<style lang="less">
.help-page {
  .help-json {
    width: 60%;
  }
  .help-html {
    margin: 0.25rem;
  }
  .button-page {
    padding: 1rem;
  }
  .button-page p {
    padding: 0.5rem;
  }
  .button-page .one .qv-btn {
    margin-right: 0.25rem;
  }
  .qv-btn-group {
    margin-left: 0.2rem;
  }
}
</style>